<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="utf-8">
  <title>商品信息</title>
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="../../layui/css/layui.css">
  <link rel="stylesheet" href="../../xznstatic/css/common.css"/>
  <link rel="stylesheet" href="../../xznstatic/css/style.css"/>
  <script type="text/javascript" src="../../xznstatic/js/jquery-1.11.3.min.js"></script>
  <script type="text/javascript" src="../../xznstatic/js/jquery.SuperSlide.2.1.1.js"></script>
</head>
<style>

  .navbar {
    background-color: #333;
    display: flex;
    justify-content: space-around; /* 使链接均匀分布 */
    align-items: center;
    /*position: fixed; !* 固定在顶部 *!*/
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    padding: 14px 0;
  }

  .navbar a {
    color: white;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
    flex: 1; /* 使每个链接占据相同的宽度 */
    font-size: 16px; /* 设置固定的字体大小 */
  }

  .navbar a:hover {
    background-color: #ddd;
    color: black;
  }


  html::after {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    content: '';
    display: block;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
  }
  #test1 {
    overflow: hidden;
  }
  #test1 .layui-carousel-ind li {
    width: 16px;
    height: 4px;
    border-width: 0;
    border-style: solid;
    border-color: rgba(0,0,0,.3);
    border-radius: 0px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 0 0px rgba(255,0,0,.8);
  }
  #test1 .layui-carousel-ind li.layui-this {
    width: 16px;
    height: 4px;
    border-width: 0;
    border-style: solid;
    border-color: rgba(0,0,0,.3);
    border-radius: 0px;
    background-color: rgba(0, 85, 119, 1);
    box-shadow: 0 0 0px rgba(0, 85, 119, 1);
  }

   /* 列表 */
     .recommend {
       padding: 10px 0;
       display: flex;
       justify-content: center;
       background-repeat: no-repeat;
       background-position: center center;
       background-size: cover;
     }
  .recommend .box {
    width: 1002px;
    margin: 0 auto;
  }
  .recommend .box .title {
    padding: 10px 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
  }
  .recommend .box .title span {
    padding: 0 10px;
    font-size: 16px;
    line-height: 1.4;
  }

  .recommend .box .filter {
    padding: 0 10px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    flex-wrap: wrap;
  }
  .recommend .box .filter .item-list {
    display: flex;
    align-items: center;
  }
  .recommend .box .filter .item-list .lable {
    font-size: 14px;
    color: #333;
    box-sizing: border-box;
  }
  .recommend .box .filter .item-list input {
    padding: 0 10px;
    box-sizing: border-box;
    outline: none;
  }
  .recommend .box .filter button {
    display: flex;
    padding: 0 10px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    outline: none;
  }
  .recommend .box .filter button i {
    margin-right: 4px;
  }

  .recommend .box .list {
    display: flex;
    flex-wrap: wrap;
  }

  .recommend .box .list .list-item {
    flex: 0 0 20%;
    padding: 0 5px;
    box-sizing: border-box;
  }
  .recommend .box .list .list-item .list-item-body {
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 3);
    padding: 5px;
    box-sizing: border-box;
  }
  .recommend .box .list .list-item-body img {
    width: 100%;
    height: 100px;
    display: block;
    margin: 0 auto;
  }

  .recommend .box .list .list-item-body .info {
    display: flex;
    flex-wrap: wrap;
  }
  .recommend .box .list .list-item-body .info .price {
    padding-top: 5px;
    color: red;
    font-size: 14px;
    text-align: center;
    box-sizing: border-box;
  }

  .recommend .box .list .list-item-body .info .name {
    padding-top: 5px;
    color: red;
    font-size: 14px;
    text-align: center;
    box-sizing: border-box;
  }

  .recommend .box .list .list-item3 {
    flex: 0 0 33.33%;
  }

  .recommend .box .list .list-item5 {
    flex: 0 0 20%;
  }

  .recommend .box .news {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    width: 100%;
  }

  .recommend .box .news .list-item {
    flex: 0 0 50%;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .recommend .box .news .list-item .list-item-body {
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 3);
    padding: 10px;
    box-sizing: border-box;
    display: flex;
  }

  .recommend .box .news .list-item .list-item-body img {
    width: 120px;
    height: 100%;
    display: block;
    margin: 0 auto;
  }

  .recommend .box .news .list-item .list-item-body .item-info {
    flex: 1;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding-left: 10px;
    box-sizing: border-box;
  }

  .recommend .box .news .list-item .list-item-body .item-info .name {
    padding-top: 5px;
    color: red;
    font-size: 14px;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .recommend .box .news .list-item .list-item-body .item-info .time {
    padding-top: 5px;
    color: red;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    box-sizing: border-box;
  }

  .recommend .box .news .list-item1 {
    flex: 0 0 100%;
  }

  .recommend .box .news .list-item3 {
    flex: 0 0 33.33%;
  }

  .index-pv1 .animation-box:hover {
    transform: perspective(1000px) translate3d(0px, 0px, 0px) scale(1.15) rotate(0deg) skew(-1deg, 0deg);
    transition: all 1.1s;
  }

  .layui-laypage .layui-laypage-count {
    padding: 0 10px;
  }
  .layui-laypage .layui-laypage-skip {
    padding-left: 10px;
  }
</style>
<body>

<div id="app">
  <div class="navbar">
    <a href="javascript:void(0);" onclick="window.location.href='store1.html'">Add Products</a>
    <a href="javascript:void(0);" onclick="window.location.href='store2.html'">Check commodities</a>


    <a href="http://101.200.235.124:8080/shopNest/front/pages/behind/manage.html">Management Station</a>

  </div>
  <div class="banner">
    <div class="layui-carousel" id="test1" :style='{"boxShadow":"0 0px 0px #fff143","margin":"0 ","borderColor":"rgba(0,0,0,.3)","borderRadius":"0px","borderWidth":"0","width":"100%","borderStyle":"solid"}'>
      <div carousel-item>
        <div v-for="(item,index) in swiperList" :key="index">
          <img style="width: 100%;height: 100%;object-fit:cover;" :src="item.img" />
        </div>
      </div>
    </div>
  </div>
  <div class="recommend index-pv1" :style='{"padding":"10px 0 10px 0","boxShadow":"0 0 0px ","margin":"0px 0 0 0","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(255, 255, 255, 1)","borderRadius":"0","borderWidth":"0","borderStyle":"solid"}'>
    <div class="box" style='width:80%'>
      <div :style='{"padding":"3px","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"10px","borderColor":"rgba(0,0,0,1)","backgroundColor":"rgba(0,0,0,0)","borderRadius":"0","borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}'>
        <div style="display: inline-block;text-align: center;cursor: pointer;" class="category-search" :index="-1" :style='swiperIndex==-1?{"padding":"0 10px","boxShadow":"0 0 6px rgba(0,0,0,.3)","margin":"0 10px 0 0","borderColor":"rgba(0,0,0,1)","backgroundColor":"rgba(225,102,178, 1)","color":"#fff","borderRadius":"2px","borderWidth":"0","width":"84px","lineHeight":"40px","fontSize":"16px","borderStyle":"solid"}:{"padding":"0 10px","boxShadow":"0 0 6px rgba(0,0,0,.3)","margin":"0 10px 0 0","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","color":"#333","borderRadius":"2px","borderWidth":"0","width":"100px","lineHeight":"40px","fontSize":"15px","borderStyle":"solid"}'>All</div>
        <div class="category-search" :index="index" :style='swiperIndex==index?{"padding":"0 10px","boxShadow":"0 0 6px rgba(0,0,0,.3)","margin":"0 10px 0 0","borderColor":"rgba(0,0,0,1)","backgroundColor":"rgba(225,102,178, 1)","color":"#fff","borderRadius":"2px","borderWidth":"0","width":"84px","lineHeight":"40px","fontSize":"16px","borderStyle":"solid"}:{"padding":"0 10px","boxShadow":"0 0 6px rgba(0,0,0,.3)","margin":"0 10px 0 0","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","color":"#333","borderRadius":"2px","borderWidth":"0","width":"100px","lineHeight":"40px","fontSize":"15px","borderStyle":"solid"}' v-for="(item,index) in categoryList" :key="index" style="display: inline-block;text-align: center;cursor: pointer;">
         {{categoryList[index]}}
       </div>
      </div>
      <div class="title" :style='{"padding":"10px 0 10px 0","boxShadow":"6px 0 2px #e0f0e9","margin":"10px 0 10px 0","borderColor":"rgba(0, 0, 0, 0.21)","backgroundColor":"#f7f7f7","borderRadius":"3px","borderWidth":"0px","borderStyle":"solid","justifyContent":"space-between","height":"70px"}'>
        <span :style='{"padding":"0 10px","boxShadow":"0 0 0px ","borderColor":"rgba(255,0,0,1)","backgroundColor":"rgba(0,0,0,0)","color":"rgba(102,0,51, 1)","borderRadius":"0 0 2px 0","borderWidth":"0","fontSize":"25px","borderStyle":"solid"}'>Information</span><span :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"rgba(0,0,0,0)","color":"rgba(129, 84, 118, 1)","borderRadius":"0","borderWidth":"0","fontSize":"20px","borderStyle":"solid"}'>Location: Production Info</span>
      </div>
      <form class="layui-form filter" :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0px 0 0px 0","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(255, 255, 255, 1)","borderRadius":"4px","borderWidth":"0","borderStyle":"solid","justifyContent":"flex-end","height":"64px"}'>
        <div class="item-list">
          <input type="radio" :style='{"width":"150px","fontSize":"14px", "height":"40px"}' name="onlyyourproduct" id="onlyyourproduct" value="1" title="Only your products">
        </div>
        <div class="item-list">
          <div class="lable" :style='{"padding":"0 0px","boxShadow":"0 0 0px ","margin":"0","borderColor":"rgba(152, 102, 102, 0)","backgroundColor":"transparent","color":"#fff","borderRadius":"0","textAlign":"left","borderWidth":"0","width":"auto","fontSize":"17px","borderStyle":"solid"}'>Item Name</div>
          <input type="text" :style='{"boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(102, 93, 93, 1)","backgroundColor":"#fff","color":"#333","borderRadius":"6px","textAlign":"center","borderWidth":"1px","width":"150px","fontSize":"14px","borderStyle":"solid","height":"40px"}' name="shangpinmingcheng" id="shangpinmingcheng" placeholder="Production name" autocomplete="off" class="layui-input">
        </div>
        <div class="item-list">
          <div class="lable" :style='{"padding":"0 0px","boxShadow":"0 0 0px ","margin":"0","borderColor":"rgba(152, 102, 102, 0)","backgroundColor":"transparent","color":"#fff","borderRadius":"0","textAlign":"left","borderWidth":"0","width":"auto","fontSize":"17px","borderStyle":"solid"}'>brand</div>
          <input type="text" :style='{"boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(102, 93, 93, 1)","backgroundColor":"#fff","color":"#333","borderRadius":"6px","textAlign":"center","borderWidth":"1px","width":"150px","fontSize":"14px","borderStyle":"solid","height":"40px"}' name="shangpinfenlei" id="shangpinfenlei" placeholder="Category" autocomplete="off" class="layui-input">
        </div>
        <div class="item-list">
          <div class="lable" :style='{"padding":"0 0px","boxShadow":"0 0 0px ","margin":"0","borderColor":"rgba(152, 102, 102, 0)","backgroundColor":"transparent","color":"#fff","borderRadius":"0","textAlign":"left","borderWidth":"0","width":"auto","fontSize":"17px","borderStyle":"solid"}'>brand</div>
          <input type="text" :style='{"boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(102, 93, 93, 1)","backgroundColor":"#fff","color":"#333","borderRadius":"6px","textAlign":"center","borderWidth":"1px","width":"150px","fontSize":"14px","borderStyle":"solid","height":"40px"}' name="pinpai" id="pinpai" placeholder="Brand" autocomplete="off" class="layui-input">
        </div>
        <button :style='{"padding":"0 15px","boxShadow":"0 0 8px rgba(0,0,0,0)","margin":"0 0 0 10px","borderColor":"#409EFF","backgroundColor":"rgba(225,102,178, 1)","color":"#fff","borderRadius":"6px","borderWidth":"0","width":"auto","fontSize":"18px","borderStyle":"solid","height":"40px"}' id="btn-search" type="button" class="layui-btn layui-btn-normal">
          <i v-if="true" class="layui-icon layui-icon-search"></i>search
        </button>
        <button :style='{"padding":"0 15px","boxShadow":"0 0 8px rgba(0,0,0,0)","margin":"0 0 0 10px","borderColor":"#409EFF","backgroundColor":"rgba(225,102,178, 1)","color":"#fff","borderRadius":"6px","borderWidth":"0","width":"auto","fontSize":"18px","borderStyle":"solid","height":"40px"}' v-if="isAuth('shangpinxinxi','新增')" @click="jump('../shangpinxinxi/add.html')" type="button" class="layui-btn btn-theme">
          <i v-if="true" class="layui-icon">&#xe654;</i>add
        </button>
      </form>
      <!-- 样式一 -->
      <div class="list" style="position: relative;">
        <div v-if="2 == 1" style="position: absolute;left: 0;top: 0;transform: translate3d(-100%, 0, 0);" :style='{"padding":"3px","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"10px","borderColor":"rgba(0,0,0,1)","backgroundColor":"rgba(0,0,0,0)","borderRadius":"0","borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}'>
          <div style="text-align: center;cursor: pointer;" class="category-search" :index="-1" :style='swiperIndex==-1?{"padding":"0 10px","boxShadow":"0 0 6px rgba(0,0,0,.3)","margin":"0 10px 0 0","borderColor":"rgba(0,0,0,1)","backgroundColor":"rgba(225,102,178, 1)","color":"#fff","borderRadius":"2px","borderWidth":"0","width":"84px","lineHeight":"40px","fontSize":"16px","borderStyle":"solid"}:{"padding":"0 10px","boxShadow":"0 0 6px rgba(0,0,0,.3)","margin":"0 10px 0 0","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","color":"#333","borderRadius":"2px","borderWidth":"0","width":"100px","lineHeight":"40px","fontSize":"15px","borderStyle":"solid"}'>全部</div>
          <div v-for="(item,index) in categoryList" :key="index" >
            <div style="text-align: center;cursor: pointer;" :style='swiperIndex==index?{"padding":"0 10px","boxShadow":"0 0 6px rgba(0,0,0,.3)","margin":"0 10px 0 0","borderColor":"rgba(0,0,0,1)","backgroundColor":"rgba(225,102,178, 1)","color":"#fff","borderRadius":"2px","borderWidth":"0","width":"84px","lineHeight":"40px","fontSize":"16px","borderStyle":"solid"}:{"padding":"0 10px","boxShadow":"0 0 6px rgba(0,0,0,.3)","margin":"0 10px 0 0","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","color":"#333","borderRadius":"2px","borderWidth":"0","width":"100px","lineHeight":"40px","fontSize":"15px","borderStyle":"solid"}' :index="index" class="category-search">{{categoryList[index]}}</div>
          </div>
        </div>
        <div  @click="jump('../shangpinxinxi/detail2.html?id='+item.id)" v-for="(item,index) in dataList" :key="index" class="list-item" :class="5=='3'?'list-item3':5=='5'?'list-item5':''">
          <div class="list-item-body animation-box" :style='{"padding":"10px","boxShadow":"0 0 0px ","margin":"0 0 10px 0","borderColor":"rgba(0,0,0,.3)","backgroundColor":"#fff","borderRadius":"4px","borderWidth":"0","borderStyle":"solid"}'>
            <img :style='{"boxShadow":"3px 0 6px #177cb0","borderColor":"rgba(0,0,0,.3)","borderRadius":"6px 6px 6px 6px","borderWidth":"1px","width":"100%","borderStyle":"solid","height":"250px"}' :src="item.tupian?item.tupian.split(',')[0]:''">
            <div class="info">
              <div v-if="item.price" :style='{"padding":"0","margin":"10px 0 0 0","backgroundColor":"rgba(0,0,0,0)","color":"rgba(255, 71, 119, 1)","borderRadius":"0","textAlign":"left","width":"100%","fontSize":"15px"}' class="price">{{item.price}} RMB</div>
              <div v-if="true" :style='{"isshow":true,"padding":"0","margin":"5px 0 0 0","backgroundColor":"rgba(0,0,0,0)","color":"rgba(225,102,178, 1)","borderRadius":"0","textAlign":"center","width":"100%","fontSize":"16px"}' class="name">{{item.shangpinmingcheng}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="pager" id="pager" :style="{textAlign:1==1?'left':1==2?'center':'right'}"></div>
    </div>
  </div>


</div>

<script src="../../layui/layui.js"></script>
<script src="../../js/vue.js"></script>
<script src="../../js/config.js"></script>
<script src="../../modules/config.js"></script>
<script src="../../js/utils.js"></script>

<script type="text/javascript">
  var vue = new Vue({
    el: '#app',
    data: {
      swiperList: [],
      categoryList: [],
      dataList: [],
      swiperIndex: '-1'
    },
    filters: {
      newsDesc: function(val) {
        if (val) {
          if (val.length > 60) {
            return val.substring(0, 60).replace(/<[^>]*>/g).replace(/undefined/g, '');
          } else {
            return val.replace(/<[^>]*>/g).replace(/undefined/g, '');
          }
        }
        return '';
      }
    },
    methods: {
      isAuth(tablename, button) {
        return isFrontAuth(tablename, button)
      },
      jump(url) {
        jump(url)
      }
    }
  });

  layui.use(['layer', 'element', 'carousel', 'laypage', 'http', 'jquery'], function() {
    var layer = layui.layer;
    var element = layui.element;
    var carousel = layui.carousel;
    var laypage = layui.laypage;
    var http = layui.http;
    var jquery = layui.jquery;

    var limit = 8;

    // 获取轮播图 数据
    http.request('config/list', 'get', {
      page: 1,
      limit: 5
    }, function(res) {
      if (res.data.list.length > 0) {
        let swiperList = [];
        res.data.list.forEach(element => {
          if (element.value != null) {
            swiperList.push({
              img: element.value
            });
          }
        });
        vue.swiperList = swiperList;

        vue.$nextTick(() => {
          carousel.render({
            elem: '#test1',
            width: '100%',
            height: '600px',
            arrow: 'hover',
            anim: 'default',
            autoplay: 'true',
            interval: '3000',
            indicator: 'inside'
          });

        })
        // vue.$nextTick(()=>{
        //   window.xznSlide();
        // });
      }
    });


    //类型查询
    categoryList();
    //类型搜索
    $(document).on("click", ".category-search", function(e){
      vue.swiperIndex = $(this).attr('index')
      pageList(e.target.innerText);
    });

    function categoryList() {
      // 获取列表数据
      http.request('option/shangpinfenlei/shangpinfenlei', 'get', {}, function(res) {
        vue.categoryList = res.data
      })

    }
    var vCategory = '';
    // 分页列表
    pageList();

    // 搜索按钮
    jquery('#btn-search').click(function(e) {
      pageList();
    });

    function pageList(category) {
      var param = {
        page: 1,
        limit: limit
      }
      if(category!=null && category!='全部') {
        vCategory = category;
        if (jquery('#shangpinmingcheng').val()) {
          param['shangpinmingcheng'] = '';
        }
        if (jquery('#shangpinfenlei').val()) {
          param['shangpinfenlei'] = '';
        }
        if (jquery('#pinpai').val()) {
          param['pinpai'] = '';
        }
      }
      if(vCategory!='' && category!='全部') {
        param['shangpinfenlei'] = category;
      }


      if (jquery('#shangpinmingcheng').val()) {
        param['shangpinmingcheng'] = jquery('#shangpinmingcheng').val() ? '%' + jquery('#shangpinmingcheng').val() + '%' : '';
      }
      if (jquery('#shangpinfenlei').val()) {
        param['shangpinfenlei'] = jquery('#shangpinfenlei').val() ? '%' + jquery('#shangpinfenlei').val() + '%' : '';
      }
      if (jquery('#pinpai').val()) {
        param['pinpai'] = jquery('#pinpai').val() ? '%' + jquery('#pinpai').val() + '%' : '';
      }


      var indexQueryCondition = localStorage.getItem('indexQueryCondition');
      if (indexQueryCondition) {
        param['shangpinmingcheng'] = '%' + indexQueryCondition + '%';
        localStorage.removeItem('indexQueryCondition');
      }

      if (localStorage.getItem('adminName') !== 'admin') {
        param['seller'] = localStorage.getItem('adminName');
      }

      // 获取列表数据
      http.request('shangpinxinxi/list', 'get', param, function(res) {
        vue.dataList = res.data.list
        // 分页
        laypage.render({
          elem: 'pager',
          count: res.data.total,
          limit: limit,
          groups: 3,
          layout: ["prev","page","next"],
          theme: '#065279',
          jump: function(obj, first) {
            param.page = obj.curr;
            //首次不执行
            if (!first) {
              http.request('shangpinxinxi/list', 'get', param, function(res) {
                vue.dataList = res.data.list
              })
            }
          }
        });
      })
    }
  });

  window.xznSlide = function() {
    jQuery(".banner").slide({mainCell:".bd ul",autoPlay:true,interTime:5000});
    jQuery("#ifocus").slide({ titCell:"#ifocus_btn li", mainCell:"#ifocus_piclist ul",effect:"leftLoop", delayTime:200, autoPlay:true,triggerTime:0});
    jQuery("#ifocus").slide({ titCell:"#ifocus_btn li", mainCell:"#ifocus_tx ul",delayTime:0, autoPlay:true});
    jQuery(".product_list").slide({mainCell:".bd ul",autoPage:true,effect:"leftLoop",autoPlay:true,vis:5,trigger:"click",interTime:4000});
  };
</script>
</body>
</html>
